---
title: Safari Browser
date: 2025-09-22
description: Interactive Safari-like browser component with tabs, bookmarks, and more.
author: karthikmudunuri
published: true
---

<ComponentPreview name="safari-browser-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx shadcn@latest add @eldoraui/safari-browser
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

`components/eldoraui/safari-browser.tsx`

<ComponentSource name="safari-browser" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Usage

```tsx showLineNumbers
import { Safari } from "@/components/eldoraui/safari-browser"
```

```tsx showLineNumbers
<Safari
  url="eldoraui.site"
  src="https://res.cloudinary.com/eldoraui/image/upload/v1758570676/mac_llxzg3.jpg"
/>
```

## Props

| Prop     | Type     | Default | Description                           |
| -------- | -------- | ------- | ------------------------------------- |
| `url`    | `string` | `-`     | The URL to display in the address bar |
| `src`    | `string` | `-`     | The source of the image to display    |
| `width`  | `number` | `1203`  | The width of the Safari window        |
| `height` | `number` | `753`   | The height of the Safari window       |
